<template>

  <div>

<!--    <el-card class="swiper-card">
     <div class="swiper">
    <div class="swiper_box">
      <ul class="swiper_list" :class="{swiper_top:animate}">
        <li v-for="(item,index) in swiperList" :key="index">{{item}}</li>
      </ul>
    </div>
    </div>
    </el-card> -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>信息发布管理</el-breadcrumb-item>
      <el-breadcrumb-item>公告发布</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">


      <el-row :gutter="20">
        <el-col :span="9">
          <el-input placeholder="请输入内容" v-model="queryNotice.query" class="input-with-select" clearable @clear="getNoticeList">
            <el-button slot="append" icon="el-icon-search" @click="getNoticeList"></el-button>
          </el-input>
        </el-col>


        <el-col :span="2.5">
          <el-row style="float:right;padding-bottom:10px">
            <el-button icon="el-icon-document-add" type="primary" @click="mygai">添加公告</el-button>
          </el-row>
        </el-col>
      <!--  <el-col :span="2.5">
          <el-row style="float:right;padding-bottom:10px">
            <el-button icon="el-icon-document-remove" type="danger">批量删除</el-button>

          </el-row>
        </el-col> -->

      </el-row>
      <el-table :cell-style="cellStyle" stripe border :data="noticeList" style="width: 100%">
        <el-table-column type="expand" prop="content">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="公告内容:" >
                {{props.row.content}}
              </el-form-item>

            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="序号" type="index" width="80">
        </el-table-column>
        <el-table-column label="公告标题" prop="title">
        </el-table-column>
        <el-table-column label="创建者" prop="adminname" align="center" width="80">
        </el-table-column>
        <el-table-column label="创建时间" prop="created" align="center" :formatter="formatDate">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="updateNotice(scope.row)" ></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteNoticeBut(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryNotice.pageNum" :page-sizes="[5,10, 30, 40]" :page-size="queryNotice.pageSize"
        layout="total,sizes, prev, pager, next,jumper" :total="total">
      </el-pagination>
    </el-card>

    <el-dialog title="添加公告" :visible.sync="addNoticeDialogVisible" width="65%" @close="closeaNoticeForm" >

      <el-form :model="addNoticeForm" ref="addNoticeRuleForm" label-width="85px" class="demo-ruleForm">
        <el-form-item label="创建者" prop="adminname">
          <el-input v-model="addNoticeForm.adminname" ></el-input>
        </el-form-item>
        <el-form-item label="公告标题" prop="title">
          <el-input v-model="addNoticeForm.title"></el-input>
        </el-form-item>
        <el-form-item label="公告内容" prop="content">
          <el-input type="textarea" :rows="2" v-model="addNoticeForm.content" >

           </el-input>

        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addNoticeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="noticeForm">确 定</el-button>
      </span>

    </el-dialog>
    <el-dialog title="修改公告" :visible.sync="updateNoticeDialogVisible" width="65%" @close="closeaNoticeForm" >
      <el-form :model="upNoticeForm"  label-width="85px" class="demo-ruleForm">
        <el-form-item label="公告标题" prop="title">
          <el-input v-model="upNoticeForm.title"></el-input>
        </el-form-item>
        <el-form-item label="公告内容" prop="content">
          <el-input type="textarea" :rows="2" v-model="upNoticeForm.content" >
           </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateNoticeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateNoticeBut">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    //初始化函数

    data() {
      return {
        updateNoticeDialogVisible: false,
        addNoticeDialogVisible: false,
        //列表
        noticeList: [],
        //分页对象
        queryNotice: {
          query: '',
          pageNum: 1,
          pageSize: 5
        },
        total: 0,
        //表单对象
        addNoticeForm:{
        adminname:'',
        title:'',
        content:''
        },
        upNoticeForm:{
        adminname:'',
        title:'',
        content:''
        },

        animate: false,
        swiperList:[]
      }
    },
    created() {
      this.getNoticeList()
      setInterval(this.showSwiper, 10000);
      this.getTitle()

    },
    methods: {
      async getTitle(){
       const{data:result}=await this.$http.get("/notice/getTitle")
       this.swiperList=result.data
      },
        mygai(){
          this.addNoticeDialogVisible=true;
          this.$refs.addNoticeRuleForm.resetFields();
        },


      async getNoticeList() {
        const {
          data: result
        } = await this.$http.get("/notice/getNoticeList", {
          params: this.queryNotice
        })
        if (result.status != 200) return this.$message.error("查询失败")
        this.noticeList = result.data.rows

        this.total = result.data.total
        //console.log(result.data.rows)

      },
      handleSizeChange(size) {
        this.queryNotice.pageSize = size
        this.getNoticeList()
      },
      handleCurrentChange(current) {
        this.queryNotice.pageNum = current
        this.getNoticeList()
      },
      cellStyle({row,column,rowIndex,columnIndex}){
        let style={padding:'1px 6px'}
        return style
      },
      formatDate(row, column, cellValue, index) {
        let date = new Date(cellValue)
        let year = date.getFullYear()
        let month = (date.getMonth() + 1 + '').padStart(2, '0')
        let day = (date.getDate() + '').padStart(2, '0')
        let HH = (date.getHours() + '').padStart(2, '0')
        let MM = (date.getMinutes() + '').padStart(2, '0')
        let SS = (date.getSeconds() + '').padStart(2, '0')
        return year + '-' + month + '-' + day + ' ' + HH + ":" + MM + ":" + SS
      },
      // closeaNoticeForm(){
      //    this.inNoticeForm()
      // },
      inNoticeForm(){
        this.$refs.addNoticeRuleForm.resetFields()
      },
      noticeForm(){
        this.$refs.addNoticeRuleForm.validate(async validate =>{
          if (!validate) return
          const {
            data: result
          } = await this.$http.post("/notice/saveNotice", this.addNoticeForm)
          if (result.status !== 200) return this.$message.error("新增公告失败")
          this.$message.success("新增公告成功!!!")
         this.getNoticeList()
         this.addNoticeDialogVisible=false
         this.$refs.addNoticeRuleForm.resetFields()
        })
      },


      deleteNoticeBut(notice){
        console.log(notice)
       this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'}).then(async  ()=>{
          const {data : result}=await this.$http.delete('/notice/deleteNotice/'+notice.id)
          if(result.status !=200)return this.$message.error("删除公告失败")
          this.$message.success("删除数据成功")
          this.getNoticeList()
          }).catch(()=>{
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })

      },


      updateNotice(notice){
        console.log(notice)
        this.updateNoticeDialogVisible=true
        this.upNoticeForm= JSON.parse(JSON.stringify(notice))
        },
      async updateNoticeBut(){
       const { data: result } = await this.$http.put("/notice/updateNotice", this.upNoticeForm)
        if (result.status !== 200) return this.$message.error("修改失败")
        this.$message.success("修改成功!!!")
          this.getNoticeList()
          this.updateNoticeDialogVisible=false
      },
/* 公告栏 */
      showSwiper () {
            this.animate = true;
            setTimeout(() => {
              this.swiperList.push(this.swiperList[0]);
              this.swiperList.shift();
              this.animate = false;
            }, 1000);
          }
        }
    }
</script>

<!-- 防止样式重叠 -->
<style lang="less" scoped>
  .el-form {
    margin-top: 30px;
  }

  .dialogDiv {
    height: 30px;
    }


/* .item {
  margin-top: 1px;
  margin-right: 40px;
} */
//可以去掉
.box-card{
  margin-top: 20px;
}

.swiper-card{
  height: 150px;
  width: 100%;
}
 .swiper {

   margin: 0px;
   width: 100%;
   //align-items: center;
   color: #3a3a3a;
   background-color: white;
   display: flex;
   box-sizing: border-box;
  //overflow: hidden;
   font-size: 14px;
   font-weight: bold;
 }
.swiper_box {

 display: block;
  position: relative;
  width: 100%;
  height: 500px;
   // overflow: hidden;
}
.swiper_list {
  display: block;
  position: absolute;
  top: 1px;
  left: 0;
  height: 50px;
}
.swiper_top {
  //transition: all 0.5s;
  margin-top:  0px;
}
.swiper_list li {
  height: 500px;
  line-height: 30px;
  font-size: 14px;
  color: #ca010b;
}
.swiper_list li span {
  padding: 0px;
}



</style>
